[원문] : http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
IE에서 background 에 이미지 부릿 형태로 이미지 적용을 해보면 적용이 되질 않는다.
그래서 해결 할 수 있는 방법은 ; position: relative 포함 해주자 .
IE has a very freaky bug where it likes to make background images (and sometimes even text - particularly if there are floated elements around) disappear. This often happens when you scroll up and down on a web page and you can usually make the background re-appear by refreshing the page.
Obviously you won't want your site visitors to have to refresh a page to see a background image in full! A freaky solution to this freaky problem is to insert the CSS command, position: relative
into the CSS rule containing the background image:
.foo {
background: url(filename.jpg);
position: relative
}
Occasionally this won't work, so another solution is to assign a width or a height to the element with the background image. You may not want to assign a height or width, so a solution is to assign a height of 1% for Internet Explorer. Because IE interprets height
as min-height
(see point 2 above) this CSS rule won't affect the appearance:
.foo {
background: url(filename.jpg);
height: 1%
}
html>body .foo {
height: auto
}
The height: 1%
CSS command is cancelled out by the height: auto
CSS command. Internet Explorer doesn't understand html>body
, so by inserting this in front of the second CSS rule this whole CSS rule is ignored by IE.